<template>
    <div class="shiftManagement">
        <div class="content">
            <h4>值班室排班表</h4>
            <div class="btn">
                <el-button plain icon="el-icon-circle-plus" v-on:click="clickHandler"
                    @click="dialogFormVisible1 = true">添加班次</el-button>
            </div>
            <el-table :data="shiftSchedule" style="width: 100%">
                <el-table-column prop="shift" label="班次编号">
                </el-table-column>
                <el-table-column prop="schedules" label="班次时段">
                </el-table-column>
                <el-table-column label="人员排班计划">
                    <el-table-column prop="mon" label="周一">
                        <template slot-scope="scope">
                            <span v-html="scope.row.mon"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tue" label="周二">
                        <template slot-scope="scope">
                            <span v-html="scope.row.tue"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wed" label="周三">
                        <template slot-scope="scope">
                            <span v-html="scope.row.wed"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="thu" label="周四">
                        <template slot-scope="scope">
                            <span v-html="scope.row.thu"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fri" label="周五">
                        <template slot-scope="scope">
                            <span v-html="scope.row.fri"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sat" label="周六">
                        <template slot-scope="scope">
                            <span v-html="scope.row.sat"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sun" label="周日">
                        <template slot-scope="scope">
                            <span v-html="scope.row.sun"></span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template>
                        <el-button type="text" size="small" @click="dialogFormVisible2 = true">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteAll">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="新添班次" :visible.sync="dialogFormVisible1">
            <el-form>
                <el-form-item label="班次" :label-width="formLabelWidth">
                    <el-select v-model="value1" placeholder="请选择" @change="$forceUpdate()">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="人员" :label-width="formLabelWidth">
                    <el-select v-model="value2" placeholder="请选择" multiline-limit="2" multiple>
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="星期" :label-width="formLabelWidth">
                    <el-select v-model="value3" placeholder="请选择">
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible1 = false, addShiftSchedule()">确认</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改班次" :visible.sync="dialogFormVisible2">
            <el-form :model="shiftSchedule">
                <el-form-item label="人员名称" :label-width="formLabelWidth">
                    <el-select v-model="shiftSchedule" placeholder="请选择记录对象" clearable>
                        <el-option :label="item" :value="item" v-for="item in shiftSchedule"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible2 = false">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
    
<script>
export default {
    data: function () {
        return {
            shiftSchedule: [],
            newName: '',
            dialogTableVisible1: false,   //模态框
            dialogFormVisible1: false,
            dialogTableVisible2: false,
            dialogFormVisible2: false,
            options1: [{
                value: '早班',
                label: '早班'
            }, {
                value: '中班',
                label: '中班'
            }, {
                value: '晚班',
                label: '晚班'
            }],
            options2: [{
                value: 'test1',
                label: 'test1'
            }, {
                value: 'test2',
                label: 'test2'
            }, {
                value: 'test3',
                label: 'test3'
            }, {
                value: 'test4',
                label: 'test4'
            }, {
                value: 'test5',
                label: 'test5'
            }, {
                value: 'test6',
                label: 'test6'
            }, {
                value: 'test7',
                label: 'test7'
            }, {
                value: 'test8',
                label: 'test8'
            }, {
                value: 'test9',
                label: 'test9'
            }],
            options3: [{
                value: '周一',
                label: '周一'
            }, {
                value: '周二',
                label: '周二'
            }, {
                value: '周三',
                label: '周三'
            }, {
                value: '周四',
                label: '周四'
            }, {
                value: '周五',
                label: '周五'
            }, {
                value: '周六',
                label: '周六'
            }, {
                value: '周天',
                label: '周天'
            }],
            value1: '',
            value3: '',
            value2: [],
            formLabelWidth: '120px'
        }
    },
    mounted: function () {
        this.getShiftSchedule();
    },
    methods: {
        clickHandler(evt) { //强制失去焦点
            let target = evt.target;
            if (target.nodeName == "SPAN") {
                target = evt.target.parentNode;
            }
            console.log(evt);
            target.blur();
        },
        addShiftSchedule: function () {
            if (this.value3 == "周一") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周一": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else if (this.value3 == "周二") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周二": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else if (this.value3 == "周三") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周三": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else if (this.value3 == "周四") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周四": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else if (this.value3 == "周五") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周五": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else if (this.value3 == "周六") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周六": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else if (this.value3 == "周天") {
                this.$axios({
                    url: 'workface',
                    method: 'post',
                    data: {
                        classes: this.value1,
                        map: {
                            "周天": this.value2
                        }
                    }
                }).then(({ data }) => {
                    if (data.code == 200) {
                    } else {
                        console.log(data);
                    }
                })
            } else {

            }

            this.getShiftSchedule();
        },
        getShiftSchedule: function () {
            this.$axios({
                url: 'workfaces',
                method: 'get'
            }).then(({ data }) => {
                if (data.code == 200) {
                    let obj = data.data;

                    this.shiftSchedule = [
                        {
                            shift: '早班',
                            schedules: '8:00-16:00',
                            /* mon: obj.早班.周一.join('<br/>'),
                            tue: obj.早班.周二.join('<br/>'), */
                            mon: obj.早班.周一 ? obj.早班.周一.join('<br/>') : '无',
                            tue: obj.早班.周二 ? obj.早班.周二.join('<br/>') : '无',
                            wed: obj.早班.周三 ? obj.早班.周三.join('<br/>') : '无',
                            thu: obj.早班.周四 ? obj.早班.周四.join('<br/>') : '无',
                            fri: obj.早班.周五 ? obj.早班.周五.join('<br/>') : '无',
                            sat: obj.早班.周六 ? obj.早班.周六.join('<br/>') : '无',
                            sun: obj.早班.周天 ? obj.早班.周天.join('<br/>') : '无'
                        }, {
                            shift: '中班',
                            schedules: '16:00-22:00',
                            mon: obj.中班.周一 ? obj.中班.周一.join('<br/>') : '无',
                            tue: obj.中班.周二 ? obj.中班.周二.join('<br/>') : '无',
                            wed: obj.中班.周三 ? obj.中班.周三.join('<br/>') : '无',
                            thu: obj.中班.周四 ? obj.中班.周四.join('<br/>') : '无',
                            fri: obj.中班.周五 ? obj.中班.周五.join('<br/>') : '无',
                            sat: obj.中班.周六 ? obj.中班.周六.join('<br/>') : '无',
                            sun: obj.中班.周天 ? obj.中班.周天.join('<br/>') : '无'
                        }, {
                            shift: '晚班',
                            schedules: '22:00-8:00',
                            mon: obj.晚班.周一 ? obj.晚班.周一.join('<br/>') : '无',
                            tue: obj.晚班.周二 ? obj.晚班.周二.join('<br/>') : '无',
                            wed: obj.晚班.周三 ? obj.晚班.周三.join('<br/>') : '无',
                            thu: obj.晚班.周四 ? obj.晚班.周四.join('<br/>') : '无',
                            fri: obj.晚班.周五 ? obj.晚班.周五.join('<br/>') : '无',
                            sat: obj.晚班.周六 ? obj.晚班.周六.join('<br/>') : '无',
                            sun: obj.晚班.周天 ? obj.晚班.周天.join('<br/>') : '无'
                        }];
                    console.log(this.shiftSchedule);
                } else {
                    console.log(data);
                }
            })
        },
        deleteAll: function () {
            console.log(this);
        }
    }
}
</script>
    
<style scoped lang="less">
.shiftManagement {
    width: 100%;
    height: 100%;
    min-width: 940px;
    background-color: #d9ecff;
    text-align: left;

    .content {
        margin: 1%;
        width: 96%;
        min-width: 900px;
        min-height: 545px;
        height: 92%;
        background-color: #fff;
        padding: 1%;

        .btn {

            .el-button,
            .el-button--default,
            .is-plain {
                margin: 1%;
                width: 8%;
                height: 90%;
                padding: 1% 1%;
            }
        }

        /deep/ .cell {
            text-align: center;
        }
    }
}

/deep/ .el-dialog__body {

    td {
        padding: 0;
    }

    .cell {
        text-align: center;
        padding: 0;
        margin: 0;
        height: 50px;
        line-height: 50px;
    }
}
</style>